<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>办事指南-常见问题</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.mui-content{padding:.125rem!important ;}
			/*问题列表*/
			.question_cont{width:7.25rem;overflow:auto;margin:0;}
			.question_cont .question_list{width:100%;float:left;margin-bottom:.15rem;background:#fff;}
			.question_cont .question_list .question_top{border:1px solid #d9d9d9;border-bottom:none;padding-top:.35rem;overflow:hidden;}
			.question_titles{width:4.8rem;float:left;height:.35rem;background:url(../../images/jindu/question_line.png) no-repeat; background-size:100% auto;position:relative;margin-left:1.1rem;}		
			.question_titles>span{width:1rem;height:.35rem;position:absolute;line-height:.35rem;left:50%;margin-left:-.45rem;color:#999;font-size:.3rem;top:0;}		
			.question_center{background:url(../../images/jindu/question_bian.png) no-repeat; background-size:100% auto;background-position:left bottom;overflow:hidden;height:.33rem;width:100%;}
			.question_titles>span>img{width:.3rem;float:left;margin-right:.07rem;margin-top:.03rem;}
			.question_top .share{float:right;width:1rem;background:url(../../images/jindu/share.png) no-repeat; background-size:.26rem auto;background-position:left .04rem;padding-left:.36rem;color:#a0a0a0;line-height:.4rem;margin-right:.2rem;
			margin-top:.08rem;font-size:.26rem;}
			.question_tw{font-size:.28rem;width:100%;padding:.37rem .2rem;width:100%;float:left;margin:0;color:#333;}
			.question_bottom{background:#fafafa;border:1px solid #d9d9d9;border-top:none;overflow:hidden;padding-top:.1rem;}
		</style>
	</head>
	<body>
		<div class="mui-content" id='scroll'>
			<!--问题列表-->
			<div class="question_cont"  id='question_cont'> 
				<template v-for="question in questionList">
					<div class="question_list">
						<div class="question_top">
							<h5 class="question_titles"><span><img src="../../images/jindu/tw2x.png" style="margin-top:0;">问题</span></h5>
							<p class="question_tw">{{question.description}}</p>
						</div>
						<div class="question_center"></div>
						<div class="question_bottom">
							<h5 class="question_titles"><span><img src="../../images/jindu/jd2x.png">解答</span></h5>
							<p class="question_tw" style="padding-top:.2rem">{{question.answer}}</p>
						</div>
					</div>
				</template>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/app.js"></script>
		<script>
			//$('.question_cont').height($(window).height()-$('.mui-bar-nav').height()-$(".mui-search").height()-10);
			
			var pageStart = 0;//当前页码
			var pageSize = 3;//每页显示的条数
			var maxPageNumber = 1;//最大页数
			var serviceOid = utils.getUrlParam("serviceOid");//从上个页面获取的事项id
			
			mui.init();
			mui.plusReady(function(){
				loadMore(1,99);
			});
			/*mui.init({
				pullRefresh: {
					container: "#scroll", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					  up: {//上拉加载
				            contentrefresh: '正在加载...',
				            auto:true,//可选,默认false.自动上拉加载一次
				            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				            callback: pullupRefresh 
				       }
				}
			});*/
		
			var news = new Vue({
			    el: '#question_cont',
			    data: {
			  	    questionList:[]
			    }
			});
			
			/**
			 * 上拉加载页面数据
			 */
			function pullupRefresh() {
			    setTimeout(function() {
			        pageStart++;//翻下一页
			        if(pageStart<=maxPageNumber){
			       		loadMore(pageStart,pageSize);//获取数据的方法
			        }else{
			        	mui('#scroll').pullRefresh().endPullupToRefresh(true);
			        }
			    }, 100);
			}
			
			//加载数据
			function loadMore(pageStart,pageSize) {
			    var param = 'serviceOid='+serviceOid+'&pageNumber=' + pageStart+ '&random=' + Math.random()+'&pageSize=' + pageSize;
				var url = 'appHttpService/querySxQuestionByServiceOid.do';
			    utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.state == 0 && data.total > 0) {
						maxPageNumber = data.maxPageNumber;
						var rows = JSON.parse(data.questionList);
						if(rows != null && rows.length > 0){
							news.questionList = news.questionList.concat(rows);
							/*mui('#scroll').pullRefresh().endPullupToRefresh(false);*/
						}else{
							/*mui('#scroll').pullRefresh().endPullupToRefresh(true);*/
						}
					}else if(data.state == 0 && data.total == 0) {
						/*mui('#scroll').pullRefresh().endPullupToRefresh(true);*/
					}
				}, param);
				
			};
			
			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newContents = [];
				items.forEach(function(question) {
					newContents.push({
						questionOid: question.questionOid,
						title: question.title,
						description: question.description,
						answer: question.answer
					});
				});
				return newContents;
			}
		</script>
	</body>
</html>
